﻿@page "/cherry-markdowns"

<h3>@Localizer["Header"]</h3>
<h4>@Localizer["P1"]</h4>

<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]">
    <CherryMarkdown @bind-Value="MarkdownString" @bind-Html="HtmlString" style="height: 400px"></CherryMarkdown>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @MarkdownString
            </textarea>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @HtmlString
            </textarea>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P4"]" Introduction="@Localizer["P5"]">
    <CherryMarkdown OnFileUpload="OnFileUpload"></CherryMarkdown>
</DemoBlock>

<DemoBlock Title="@Localizer["P6"]" Introduction="@Localizer["P7"]">
    <CherryMarkdown ToolbarSettings="@ToolbarSettings" EditorSettings="@EditorSettings"></CherryMarkdown>
</DemoBlock>

<DemoBlock Title="@Localizer["P8"]" Introduction="@Localizer["P9"]">
    <CherryMarkdown @bind-Value="MarkdownString" @bind-Html="HtmlString" style="height: 400px" IsViewer="true"></CherryMarkdown>
</DemoBlock>

<DemoBlock Title="@Localizer["P10"]" Introduction="@Localizer["P11"]">
    <CherryMarkdown @ref="@MarkdownElement"></CherryMarkdown>
    <Button OnClick="@(async () => { await MarkdownElement.DoMethodAsync("toolbar.toolbarHandlers.insert", "checklist");})">@Localizer["P12"]</Button>
    <Button OnClick="@(async () => { await MarkdownElement.DoMethodAsync("insert", "![一张图片](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)", false, false, true);})">@Localizer["P13"]</Button>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>
